<script setup lang="ts">
import type {FormInstance} from "element-plus";
import {CERTIFICATE_TYPE, EXAMINE_STATUS} from "~/const/Maps";

definePageMeta({
  title:'实名认证审核列表',
  layout:'admin'
})
const form={
  page:1,
  limit:10,
  domain:'',
  surname:'',
  user_id:'',
  name:'',
}
const formRef=ref<FormInstance>
const {data:list,refresh}=await useServerGet('/backend/certification/getList',form)
const search=()=>{
  refresh&&refresh();
}
const audit=async (row:any,value:number)=>{
  ElMessageBox.confirm('确定审核吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then( async () => {
    const {data,code}=await usePost('/backend/certification/examine',{id:row.id,examine_status:value})
    if(code==200){
      refresh&&refresh();
    }
  }).catch(() => {
  });
}

</script>

<template>
  <el-card>
    <el-form ref="formRef" :model="form" inline label-width="5" class="my">
      <el-form-item>
        <el-input v-model="form.domain" placeholder="请输入域名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.surname" placeholder="请输入姓" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.name" placeholder="请输入名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.user_id" placeholder="请输入用户ID" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search" >搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list.data.list" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column prop="user_id" label="用户ID"></el-table-column>
      <el-table-column label="认证类型">
        <template #default="scope">{{ CERTIFICATE_TYPE[scope.row.certification_type] }}</template>
      </el-table-column>
      <el-table-column label="证件信息" width="400">
        <template #default="scope">
          <p>姓名：{{ scope.row.surname }}{{scope.row.name}}</p>
          <p>身份证号：{{scope.row.id_card_number}}</p>
          <div v-if="scope.row.certification_type==20">
            <p>企业名称：{{ scope.row.business_name }}</p>
            <p>营业执照号：{{scope.row.business_license_number}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证件照">
        <template #default="scope">
            <MyImage :src="scope.row.id_card_front" :list="scope.row.certification_type==20?[scope.row.id_card_front,scope.row.id_card_opposite,scope.row.id_card_opposite]:[scope.row.id_card_front,scope.row.id_card_opposite]" />
        </template>
      </el-table-column>

      <el-table-column label="审核状态">
        <template #default="scope">{{ EXAMINE_STATUS[scope.row.examine_status] }}</template>
      </el-table-column>
      <el-table-column
          label="是否同步">
        <template #default="scope">{{ scope.row.sync_tpl==1?'是':'否' }}</template>
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <div class="flex" v-if="!row.examine_status">
            <template v-for="(label,value) in EXAMINE_STATUS">
              <el-button :type="value*1==10?'primary':''" @click="audit(row,10)" v-if="value*1">{{ label }}</el-button>
            </template>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
    </el-table>
    <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total" @change="refresh"></MyPage>
  </el-card>
</template>

<style scoped lang="scss">

</style>